<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
      *{
         margin:0;
         padding:0;
      }
      ul,li{
         list-style: none;
      }
      .box{
         width:400px;
         height:250px;
         border:2px solid orange;
         position: relative;
         margin:auto;
         top:100px;
         overflow: hidden;
      }
      .box .list{
         width:2000px;
         height:100%;
      }
      .box .list li{
         width:400px;
         height:250px;
         background:pink;
         float:left;
         font-size: 20px;
         text-align: center;
         line-height:250px ;
      }
      .box .list li:nth-of-type(2){
         background:orange;
      }
      .box .list li:nth-of-type(3){
         background:skyblue;
      }
      .box .list li:nth-of-type(4){
         background:yellowgreen;
      }
      .box .list li:nth-of-type(5){
         background:greenyellow;
      }
      .box .btnlist{
         position: absolute;
         bottom:10px;
         right:10px;
      }
      .box .btnlist li{
         width:20px;
         height:20px;
         background: orangered;
         border-radius: 50%;
         font-size: 14px;
         text-align: center;
         line-height: 20px;
         float:left;
         margin-right:6px;
      }
   </style>
</head>
<body>
   <div class="box">
      <ul class = 'list'>
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>
      </ul>
      <span></span>
      <ol class='btnlist'>
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>
      </ol>
   </div>
</body>
</html>